<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="actionStatus == 'edit' ? '编辑会员' : '新建会员'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item
            label="会员卡号"
            :colon="false"
            v-if="props.actionStatus == 'edit'"
          >
            <div>{{ card_num }}</div>
          </a-form-item>
          <a-form-item label="姓名">
            <a-input
              allow-clear
              placeholder="请输入姓名"
              v-model:value="form.name"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="昵称">
            <a-input
              allow-clear
              placeholder="请输入昵称"
              v-model:value="form.nickname"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="性别">
            <a-select
              optionFilterProp="label"
              allow-clear
              v-model:value="form.sex"
              placeholder="请选择性别"
              @change="sexChange"
            >
              <a-select-option value="男">男</a-select-option>
              <a-select-option value="女">女</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="会员等级">
            <a-select
              optionFilterProp="label"
              :options="levelOptions"
              allow-clear
              v-model:value="form.level"
              placeholder="请选择角色"
              @change="levelChange"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="生日">
            <a-row>
              <a-col :md="16" :sm="16" :xs="16">
                <!-- <a-date-picker class="ele-fluid" valueFormat="MM-DD" placeholder="请选择"
									v-model:value="form.birthday" autocomplete="off" /> -->
                <a-date-picker
                  class="ele-fluid"
                  valueFormat="MM-DD"
                  placeholder="请选择"
                  v-model:value="form.birthday"
                  :format="customWeekStartEndFormat"
                  autocomplete="off"
                />
              </a-col>
              <a-col :md="8" :sm="8" :xs="8" style="text-align: right">
                <a-checkbox v-model:checked="birthday_type" @change="change"
                  >农历</a-checkbox
                >
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="婚姻状况">
            <a-select
              optionFilterProp="label"
              allow-clear
              v-model:value="form.marital"
              placeholder="请选择"
              @change="marriageChange"
            >
              <a-select-option value="1">未知</a-select-option>
              <a-select-option value="2">未婚</a-select-option>
              <a-select-option value="3">已婚</a-select-option>
              <a-select-option value="4">离异</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="历史积分">
            <a-input
              allow-clear
              placeholder="请输入"
              :disabled="props.actionStatus == 'edit'"
              v-model:value="form.history_points"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="历史消费次数">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.consume_times"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="" v-if="props.actionStatus == 'edit'" />
          <a-form-item label="手机号" v-bind="validateInfos.mobile">
            <a-input
              allow-clear
              placeholder="请输入手机号"
              v-model:value="form.mobile"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="证件号">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.id_num"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="地区">
            <a-cascader
              :fieldNames="fieldNames"
              placeholder="请选择所在地区"
              :options="options"
              v-model:value="defaultValue"
              @change="changeRegion"
            />
          </a-form-item>
          <a-form-item label="入会时间" v-bind="validateInfos.join_time">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择"
              v-model:value="form.join_time"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="出生日期">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择"
              v-model:value="form.birth"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="纪念日">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择"
              v-model:value="form.commemoration"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="积分有效期">
            <a-date-picker
              class="ele-fluid"
              valueFormat="YYYY/MM/DD"
              placeholder="请选择"
              :disabled="props.actionStatus == 'edit'"
              v-model:value="form.points_valid"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
              placeholder="请输入备注"
              allow-clear
              v-model:value="form.note"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import { Form } from 'ant-design-vue';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import { get_address } from '@/api/tenant/store';
  import { get_role_select } from '@/api/material/select';
  import { member_level_get_setting } from '@/api/member/get_setting';
  import { detail } from '@/api/member/get_list';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑edit/新建add
    actionStatus: String,
    // 编辑数据id
    editDataId: [String, Number],
    storeId: String
  });

  const emit = defineEmits(['done', 'update:visible']);
  const levelOptions = ref([]);
  const options = ref([]);
  const card_num = ref(null);
  const defaultValue = ref(null);
  const birthday_type = ref(false);
  // 地址选择下拉框更改label、balue
  const fieldNames = ref({
    label: 'label',
    value: 'value'
  });

  const weekFormat = 'MM-DD';
  const customWeekStartEndFormat = (value) =>
    `${dayjs(value).format(weekFormat)}`;

  onMounted(() => {
    member_level_get_setting().then((res) => {
      res.level.forEach((item) => {
        levelOptions.value.push({
          label: item.name,
          value: item.level
        });
      });
    });
    get_address().then((res) => {
      options.value = res;
    });
    form.id = props.editDataId;
    if (props.editDataId) {
      detail({
        id: props.editDataId
      }).then((res) => {
        Object.keys(form).map((key) => {
          if (res.info) {
            form[key] =
              res && res[key]
                ? String(res[key])
                : res.info[key]
                ? String(res.info[key])
                : null;
            if (key == 'level') {
              form[key] = res.info[key];
            }
            if (key == 'birthday_type') {
              birthday_type.value = res['birthday_type'] == 1 ? true : false;
            }
          }
        });
        defaultValue.value = res.region_name;
        card_num.value = res.card_num;
        console.log('from===', form);
      });
    }
  });

  const changeRegion = (e) => {
    console.log('地区改变：', e);
    form.region = e[e.length - 1];
  };
  const change = (e) => {
    form.birthday_type = e.target.checked ? 1 : 0;
  };
  /* 更新婚姻选中数据 */
  const marriageChange = (e) => {
    form.marital = e;
  };
  /* 更新性别选中数据 */
  const sexChange = (value) => {
    console.log('性别', value);
    form.sex = value;
  };
  /* 更新会员等级选中数据 */
  const levelChange = (value) => {
    console.log('会员等级', value);
    form.level = value ? value : null;
  };

  // 提交状态
  const loading = ref(false);

  // 表单数据
  const form = reactive({
    name: '',
    id_num: '',
    mobile: '',
    level: null,
    nickname: '',
    sex: null,
    region: null,
    marital: null,
    history_points: '',
    points_valid: null,
    join_time: '',
    birth: '',
    birthday: '',
    birthday_type: 0,
    commemoration: '',
    consume_times: '',
    note: ''
  });
  // 表单验证规则
  const rules = reactive({
    mobile: [
      {
        required: true,
        message: '请输入手机号',
        type: 'string',
        trigger: 'blur'
      }
    ],
    join_time: [
      {
        required: true,
        message: '请选择入会时间',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        console.log('form===', form);
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
